*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Open Sans',sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    
}
.container{
    width: 90%;
    margin: auto;
    
}
nav{
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
}
#navlogo{
    height: 30px;
    background-image: url(../Images/default-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30%;
    float: left;
    
    
}


#navitems{
    width: 70%;
    float: right;
    
    text-align: right;
    font-size: 25px;
}
#navitems>i{
    padding: 0 5px;
}


/* Header image */

.bimg{
    background-image: url(../Images/2686700.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 715px;
    display: flex;
    align-items: center;
}
.btxt{
    width: 40%;
    margin: 100px 0;
    height: 100% !important;
    
    
    
    
}
.btxt>#h1{
    
    font-size: 5.5rem;
    font-weight: 700 !important;
    font-family: Oswald,sans-serif !important;
    color: hsl(29, 100%, 50%);
    
}
.btxt>p{
    margin: 20px 0;
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.6em;
    color :#555c66;
    font-family: 'Open Sans',sans-serif;

}
.btxt>div>input,.btxt>div>button{
    height: 50px;
    border: none;
    margin-top: 10px;
}
.btxt>div>input{
   
    padding-left: 20px;
}
.btxt>div>button{
  
    background: linear-gradient(-90deg,rgb(246, 122, 6),rgb(240, 62, 7));
    color: aliceblue;
    text-transform: uppercase;
}

/* Numbering boxes */
.numberbox{
    margin: 70px auto 70px auto;
    background-color: aqua;
    
}
.box{
    color: white;
    min-height: 350px;
    
    
}
#b1{
    background-color: #ff6918;
}
#b2{
    background-color: rgb(255, 38, 0);
}
#b3{
    background-color: rgba(15, 15, 15, 0.897);
}
#b4{
    background-color: rgb(71, 71, 71);
}
/* .box>.container{
    margin: 20px 0;
} */
.bnumber{
    font-size: 50px;
    font-weight: 900;
    padding: 10px 0;
    
}
.bhead{
    font-size: 25px;
    font-weight: 900;
    margin: 10px 0;
}
.bdesc{
    font-size: 20px;
    
    line-height: 1.3em;
}
.bmore{
    margin-top: 30px;
    font-size: 60px;
}

/* Sustainable Construction */

.sustain{
    min-height: 400px;
    background-color: rgba(199, 197, 195, 0.486);
    
}
.sustaincont{
    display: flex;
    align-items: center;
    min-height: 400px;
    
}
.mar{
    margin: auto;
    text-align: center;
}

.sustain #shead{
    font-size: 3em;
    color: #ff6918;
    font-weight: 700;
    font-family: Oswald, sans-serif;
    word-wrap: break-word;
    margin: 20px 0;
}
#sdesc{
    line-height: 1.6em;
    font-size: 20px;
    color: #555c66;
}
.sustain button{
    width: 150px;
    height: 50px;
    border: none;
    margin: 20px 0;
    color: white;
    font-size: 18px;
    background: linear-gradient(-90deg,rgb(246, 122, 6),rgb(240, 62, 7));
}

/* OUR VISION */

.vcontainer{
    min-height: 550px;
    background-color: #ff6918;
    display: flex;
    justify-content: center;
}
.mary{
    display: grid;
    background-color: aliceblue;
    margin: 50px auto;
    
}
#vtxt{
    margin: 50px auto;
    
}
#vtxt1{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.125rem;
}
#vtxt2{
    font-family: Oswald,sans-serif !important;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1.1em;
    margin-top: 6px;
    color: #ff6918;
}
#vtxt3{
    font-weight: 700;
    margin-top: 20px;
    font-size: 1.125rem;

}
#vtxt4{
    width: 120px;
    letter-spacing: 1px;
    margin: 20px 0;
    border-bottom: solid 1px black;
}
.mary>.vimg{
    background-size: cover;
    background-position: 50% 50%;

}
#vimg1{
    background-image: url(../Images/56.jpg);
    
    
}
#vimg2{
    background-image: url(../Images/dddd.jpg);
    
}
#vimg3{
    background-image: url(../Images/ccc.jpg);
    
   
}
#vtxt>ul{
    margin-top: 20px;
    padding-left: 20px;
}


/* Dream Home */
#home>.container{
    

}
#htxt{
    
}
#himg{
    background-image: url(../Images/OBC8MR0.jpg);
    background-size: cover;
    background-position: 50% 50%;
    padding: 30px 60px;
    overflow: visible;
    min-height: 450px;
    
}
#homecont{
    width: 50%;
    display: flex;
    align-items: center;
    background-color: transparent !important;
    opacity: 1;
}
#homecont>.container{
    margin: 50px auto;
    background-color: transparent !important;
}
#htxt>#sdesc{margin: 20px 0 30px 0;}
#htxt>button{
    width: 150px;
    height: 50px;
    border: none;
    margin: 20px 0;
    color: white;
    font-size: 18px;
    background: linear-gradient(-90deg,rgb(246, 122, 6),rgb(240, 62, 7));

}

/* Three boxes */
#tboxcont{
    background-image: url(../Images/287633P6LV61303min.jpg);
    background-position: 50% 50%;
    background-size: cover;
}
#threebox{
    margin-top: -100px;
}
#threebox>.container{display: grid;
grid-gap: 30px;
margin-bottom: 100px;}
#threebox .tbox{
    background-color: white;
    border: 0.5px solid black;
    text-align: center;
    padding: 10px 50px;
    

}
.tbox>.roundicon{
    height: 100px;
    width: 100px;
    margin: 20px auto;
    border-radius: 50px;
    background-color: #ff6918;
    display: flex;
    align-items: center;
    justify-content: center;
}
.roundicon>.timg{
    height: 50px;
    width: 50px;
    background-size: cover;
}
.roundicon>#timg1{background-image: url(../Images/building.png);}
.roundicon>#timg2{background-image: url(../Images/plan.png);}
.roundicon>#timg3{background-image: url(../Images/conversation.png);}
.tbox>.thead{
    margin: 10px auto;
    letter-spacing: 2px;
    font-weight: 600;
}
.tbox>.tdesc{
    margin: 10px auto 20px auto;
    font-style: italic;
}

/* About */

#aboutcont{
    background-color: #70727436;
}
#aboutcont>.container{
    padding: 70px 0px;
}

.container #line{height: 8px;
width: 80px;
background-color: #ff6918;}
#aboutcont button{
    width: 150px;
    height: 50px;
    border: none;
    margin: 20px 0;
    color: white;
    font-size: 18px;
    background: linear-gradient(-90deg,rgb(246, 122, 6),rgb(240, 62, 7));
}

#aimg{
    background-image: url(../Images/fisheyeshotnewresitentialbuildings_97070952.jpg);
    
    background-size: cover;
    background-position: 50% 50%;
}

/* Get in touch */
#get{
    background-image: url(../Images/fvmin.jpg);
    padding: 50px 0;
}

#get>.container{
    background-color: white;
    padding: 20px;
}
#gtxt{
    text-align: center;
}
#gtxt>#line{margin: 10px auto;}
#ginput>input{height: 40px;}
#ginput>.inputbox{width: 100%;
padding-left: 10px;
margin: 10px 0;}
#ginput>textarea{padding-top: 10px;}
#ginput>button{
    width: 150px;
    height: 50px;
    border: none;
    margin: 20px 0;
    color: white;
    font-size: 18px;
    background: linear-gradient(-90deg,rgb(246, 122, 6),rgb(240, 62, 7));
}

.timingpart{margin: 30px 0;}
.timingpart>#roundicon{
    height: 40px;
    width: 40px;
    border-radius: 50px;
    background-color: #ff6918;
    display: grid;
    place-content: center;
    color: white;
    font-size: 20px;
}
#icontxt{
    font-weight: 700;
    margin-top: 5px;
}

/* Footer */

#footer{
    min-height: 250px;
    background-color: #2f2f2f;
    text-align: center;
    color: white;
    font-size: 14px !important;
    padding: 20px 0;
}
#fp{
    width: 50%;
    margin: 20px auto;
}


#footer>div{
    margin-top: 100px;
}
#footer>div>span{
    color: aqua;
}




/* Meadia Queries */

 /* For mobile phones: */
 @media only screen and (max-width:599px){
    [class*="col-"] {
    width: 100% !important;
  }

  .bimg{
    background-position: 67.33% 50%;
  }
  .btxt>#h1{
    font-size: 3.75rem;
    
  }
  #vimg1{
      height: 500px;
  }
  #vimg2,#vimg3{
    height: 250px;
}
#tboxcont{height: 513px;}
#aimg{
    margin-top: 40px;
    min-height: 300px;
}
#get>.container{
    text-align: center;
}
.timingpart>#roundicon{
    margin: auto;
}

}

  
  @media only screen and (min-width: 600px) and (max-width:767px)  {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100% !important;}
    .bimg{
        background-position: 67.33% 50%;
      }
      .btxt>#h1{
        font-size: 3.75rem;
        
      }
      #vimg1{
          height: 500px;
      }
      #vimg2,#vimg3{
        height: 250px;
    }
    #himg{min-height: 750px;}
    #tboxcont{height: 513px;}
    #aimg{
        margin-top: 40px;
        min-height: 500px;
    }
    #get>.container{
        text-align: center;
    }
    .timingpart>#roundicon{
        margin: auto;
    }
    
  }
  
  @media only screen and (min-width: 768px) and (max-width:1023px) {
    /* For desktop: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .bimg{
        background-position: 66.8% 50%;

    }
    .btxt>h1{
        font-size: 3.75rem;
      }
      .numberbox{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
    }
    .mary{
        grid-template-columns: 50% 50%;
        grid-template-rows: auto 400px 400px;
    }
    .mary>#vtxt{
        grid-column-start: 1;
        grid-column-end: 2;
    }
        .mary>#vimg1{
        grid-column-start: 2;
        grid-column-end: 3;

    }
    .mary>#vimg2{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .mary>#vimg3{
        grid-column-start: 1;
        grid-column-end: 3;

    }
    #himg{min-height: 400px;}
    #home>.container{
        display: flex;
    
    }
    #tboxcont{height: 613px;}
    #threebox>.container{
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
    }
    #aboutcont>.container{
        padding: 70px 0px;
        display: flex;
    }
    #aimg{min-height: 200px;}
    #get>.container{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-gap: 50px;
    }
    #gtxt{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
  }

  @media only screen and (min-width: 1024px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .numberbox{
        display: flex;
    }
    .mary{
      
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-rows: 50% 50%;
    }
    .mary>#vtxt,.mary>#vimg1{
        grid-row-start: 1;
        grid-row-end: 3;

    }
    .mary>#vimg2{
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .mary>#vimg3{
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3;

    }
    #himg{min-height: 750px;}
    #home>.container{
        display: flex;
    
    }
    #tboxcont{height: 613px;}
    #threebox>.container{
        grid-template-columns: auto auto auto;
    }
    #aboutcont>.container{
        padding: 70px 0px;
        display: flex;
    }
    #aimg{min-height: 200px;}
    #get>.container{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-gap: 50px;
    }
    #gtxt{
        grid-column-start: 1;
        grid-column-end: 3;
    }

  }